<template>
  <div class="app-container">
    <div class="filter-container" style="color:#909399;font-size:14px;">添加店铺</div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
      <el-form-item label="商户类型" prop="sources" ref="sources">
        <el-select v-model="ruleForm.sources" multiple placeholder="请选择商户类型" style="width: 100%;">
          <el-option label="京东自助" value="10"></el-option>
          <el-option label="微信赠机" value="20"></el-option>
          <el-option label="小屏自助" value="30"></el-option>
          <el-option label="扫枪" value="40"></el-option>
          <el-option label="到家小程序" value="50"></el-option>
          <el-option label="双屏自助" value="60"></el-option>
          <el-option label="彩娱自助" value="70"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型" prop="colMachType" ref="colMachType">
        <el-radio-group v-model="ruleForm.colMachType">
          <el-radio v-if="shopSource('10')" :label="10">京东自助</el-radio>
          <el-radio v-if="shopSource('20')" :label="20">微信赠机</el-radio>
          <el-radio v-if="shopSource('30')" :label="30">小屏自助</el-radio>
          <el-radio v-if="shopSource('40')" :label="40">扫枪</el-radio>
          <el-radio v-if="shopSource('50')" :label="50">到家小程序</el-radio>
          <el-radio v-if="shopSource('60')" :label="60">双屏自助</el-radio>
          <el-radio v-if="shopSource('70')" :label="70">彩娱自助</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="对接模式" prop="dockType" v-if="disabled">
        <el-radio-group v-model="ruleForm.dockType">
          <el-radio :label="10">大中台</el-radio>
          <el-radio :label="20">小中台</el-radio>
          <el-radio :label="30">不需要对接</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="ERP系统" prop="erpSysId" ref="erpSysId">
        <el-select v-model="ruleForm.erpSysId" size="small" filterable placeholder="请选择ERP系统">
          <el-option
            v-for="item in erps"
            :label="item.name"
            :value="item.id"
            :key="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商超" prop="marketId" ref="marketId">
        <el-select v-model="ruleForm.marketId" size="small" filterable placeholder="请选择商超">
          <el-option
            v-for="item in markets"
            :label="item.sysName"
            :value="item.id"
            :key="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="店铺名称" prop="name" ref="name">
        <el-input v-model="ruleForm.name" size="small"></el-input>
      </el-form-item>
      <el-form-item label="支付按钮模板" prop="payBtnTemplateId" ref="payBtnTemplateId" v-if="disabled">
        <el-select v-model="ruleForm.payBtnTemplateId" size="small" filterable placeholder="请选择支付按钮模板">
          <el-option
            v-for="item in payBtnTemplateList"
            :label="item.name"
            :value="item.id"
            :key="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商户编号" prop="shopNo">
        <el-input v-model="ruleForm.shopNo" size="small" disabled ></el-input>
      </el-form-item>
      <el-form-item label="设备SN号" prop="deviceList" ref="deviceList">
        <el-input 
          type="textarea" 
          resize="both"
          v-model="ruleForm.deviceList"
          :autosize="{ minRows: 3, maxRows: 8}"
          placeholder="请输入设备SN"
          size="small">
        </el-input>
      </el-form-item>
      <el-form-item label="商户登录账号" prop="linkmanPhone" >
        <el-input v-model="ruleForm.linkmanPhone" size="small"></el-input>
      </el-form-item>
      <el-form-item label="商户登录密码" prop="pwd" >
        <el-input v-model="ruleForm.pwd" size="small"></el-input>
      </el-form-item>
      <el-form-item label="商户跳转地址" prop="dthUrl" v-if="disabled">
        <el-input v-model="ruleForm.dthUrl" size="small"></el-input>
      </el-form-item>
      <el-form-item label="支付跳转地址" prop="payUrl" v-if="disabled">
        <el-input v-model="ruleForm.payUrl" size="small"></el-input>
      </el-form-item>
      <el-form-item label="开启前端服务" prop="inspect" v-if="disabled">
        <el-radio-group v-model="ruleForm.inspect" >
          <el-radio :label="10">开启</el-radio>
          <el-radio :label="20">不开启</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="心跳间隔(分)" prop="heartInterval"  v-if="isHid()&&disabled">
        <el-input-number v-model="ruleForm.heartInterval" size="small" :min="1" :max="120" :precision="0"></el-input-number>
      </el-form-item>
      <el-form-item label="一码多品" prop="severalSell" v-if="disabled">
        <template>
          <el-radio v-model="ruleForm.severalSell" :label="10">可售</el-radio>
          <el-radio v-model="ruleForm.severalSell" :label="20">非售</el-radio>
        </template>
      </el-form-item>
      <el-form-item label="商品积分保留小数位数" prop="productIntegral" v-if="disabled">
        <el-input-number v-model="ruleForm.productIntegral" size="small" :min="0" :max="3" :step="1" :precision="0"></el-input-number>
      </el-form-item>
      <el-form-item label="订单积分保留小数位数" prop="orderIntegral" v-if="disabled">
        <el-input-number v-model="ruleForm.orderIntegral" size="small" :min="0" :max="3" :step="1" :precision="0"></el-input-number>
      </el-form-item>
      <el-form-item label="商品折扣基数" prop="disRadix" v-if="disabled">
        <template>
          <el-radio v-model="ruleForm.disRadix" :label="10">折扣价</el-radio>
          <el-radio v-model="ruleForm.disRadix" :label="20">售价</el-radio>
        </template>
      </el-form-item>
      <el-form-item label="扫商品算折扣" prop="reckonDiscount" v-if="disabled">
        <template>
          <el-radio v-model="ruleForm.reckonDiscount" :label="10">是</el-radio>
          <el-radio v-model="ruleForm.reckonDiscount" :label="20">否</el-radio>
        </template>
      </el-form-item>
      <el-form-item label="小中台回写" prop="smallWrite" v-if="disabled">
        <template>
          <el-radio v-model="ruleForm.smallWrite" :label="10">已同步</el-radio>
          <el-radio v-model="ruleForm.smallWrite" :label="20">未同步</el-radio>
        </template>
      </el-form-item>
      <el-form-item label="会员远程地址" prop="memberRemtUrl" v-if="disabled">
        <el-input v-model="ruleForm.memberRemtUrl"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="formLoading" @click="submitForm('ruleForm')">保存</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { shopAddAllBase, marketAll, erpsysBaseAll, cytemplateListAll } from '@/api/api.verify.js'
import commin from "@/utils/commin.js"

export default {
  name: 'ShopForm',
  data() {
    return {
      disabled:false,
      ruleForm: {
        id: null,
        name: '',
        erpSysId:'',
        marketId: '',
        salesId: '',
        agentId: '',
        topAgentNo: '',
        payBtnTemplateId:'1301336997412143105',
        shopNo:'',//商户编号
        deviceList:'',//设备SN
        severalSell:20,
        reckonDiscount:20,
        inspect:10,
        heartInterval:30,
        productIntegral:3,
        orderIntegral:0,
        payMode:10,
        dthUrl:'cymp.caiyu123.com',
        payUrl:'cypay.caiyu123.com',
        source:"20",
        sources:["20"],
        colMachType:20,
        dockType:10,
        disRadix:10,
        smallWrite:10,
        pwd:123456,
      },
      formLoading:false,//确认按钮
      markets: [],
      erps: [],
      payBtnTemplateList:[],//支付按钮模板列表
      rules: {
        sources:[
          {required: true, message: '请选择商户类型', trigger: 'blur'}
        ],
        colMachType:[
          {required: true, message: '请选择设备', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入店铺名称', trigger: 'blur'}
          ,{min: 3, max: 35, message: '长度在 3 到 35 个字符', trigger: 'blur'}
        ],
        erpSysId: [
          {required: true, message: '请选择ERP系统', trigger: 'change'}
        ],
        marketId: [
          {required: true, message: '请选择商超', trigger: 'change'}
        ],
        payBtnTemplateId: [
          {required: true, message: '请选择支付按钮模板', trigger: 'change'}
        ],
        shopNo: [
          {required: false, message: '请输入商户编号', trigger: 'blur'}
        ],
        deviceList: [
          {required: true, message: '请输入设备SN', trigger: 'blur'}
        ],
        linkmanPhone: [
          {required: true, message: '请输入登录账号', trigger: 'blur'},
          {min: 3, max: 35, message: '长度在 3 到 35 个字符', trigger: 'blur'}
        ],
      }
    }
  },
  created() {
    this.getStart()
  },
  methods: {
    getStart(){//初始化
      this.getMarkets();
      this.getErps();
      this.getPayBtnTemplateList();
      this.ruleForm.shopNo=this.$route.query.merchantNo
      this.ruleForm.topAgentNo=this.$route.query.topAgentNo
      this.ruleForm.agentId=this.$route.query.agentId
      this.ruleForm.salesId=this.$route.query.salesId
    },
    submitForm(formName) {//表单验证
      let _this = this;
      this.$refs[formName].validate((valid,object) => {
        if(valid){
          _this.getForm()
        }else{
          for (const i in object) {
            let dom = this.$refs[i]
            // 这里是针对遍历的情况（多个输入框），取值为数组
            if (Object.prototype.toString.call(dom) !== '[object Object]') { 
              dom = dom[0]
            }
              // 第一种方法（包含动画效果）
              dom.$el.scrollIntoView({ // 滚动到指定节点
              // 值有start,center,end，nearest，当前显示在视图区域中间
              block: 'center', 
              // 值有auto、instant,smooth，缓动动画（当前是慢速的）
              behavior: 'smooth' 
            });
            break // 跳出循环了
          }
        }
      });
    },
    getForm(){//提交表单
      let _this=this
      let ruleForm=JSON.parse(JSON.stringify(_this.ruleForm));
      ruleForm.deviceList=ruleForm.deviceList.split(/[(\r\n)\r\n]+/).join(',').replace(/\s*/g,"");
      if(commin.getDomain()=="hulu"){
        ruleForm.shopType=20
      }
      this.formLoading=true
      shopAddAllBase(ruleForm,'POST').then(d=>{
          _this.$message({
            message: "添加成功",
            type: 'success',
            duration: 2000
          });
      }).finally(d=>{
        _this.formLoading=false
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();//重置表单
    },
    getMarkets() {
      let _this = this;
      let data={};
      data.status=10;
      marketAll(data).then(d=>{
        _this.markets = d.data;
      });
    },
    getErps() {
      let _this = this;
      let data={};
      data.status=10;
      erpsysBaseAll(data).then(d=>{
        _this.erps = d.data;
      });
    },
    getPayBtnTemplateList(){//获取支付按钮模板列表
      let _this=this;
      let data={};
      cytemplateListAll(data).then(d=>{
        _this.payBtnTemplateList=d.data;
      });
    },
    isHid() {
        return this.ruleForm.inspect == 10?true:false;
    },
    shopSource(e) {
      if(this.ruleForm.source){
        return this.ruleForm.source.indexOf(e)!=-1
      }else{
        return false
      }
    },
    // changeInspect(val){
    //   if(val == 20){
    //     this.isHid = true;
    //   }else{
    //     this.isHid = false;
    //   }
    // },
    // getModel(id) {
    //   let _this = this;
    //   let data={};
    //   data.id=id;
    //   shopBase(data).then(d=>{
    //       _this.ruleForm = d.data;
    //   });
    // },
  },
  watch: {
    "ruleForm.sources": function (e) {
      this.ruleForm.source=e.join(",")
    },
  }
}
</script>

